<!-- 管理员:课程考核管理:题库和在线考试管理:试题库管理:论述题 -->
<template>
  <div style="width:100% !important;padding:0 2vh;"
       id="id_container_LongEssay">
    <el-container>
      <el-main>
        <el-form>
          <el-form-item label="课程编码"
                        style="color: #004ca7 ;">
            {{ kcbm?kcbm:"空"}}
          </el-form-item>
          <el-form-item label="试题题干">
            <el-input type="textarea"
                      v-model="dxdata.sttg"></el-input>
          </el-form-item>
          <el-form-item label="参考答案">
            <el-input type="textarea"
                      v-model="dxdata.zqda"></el-input>
          </el-form-item>
          <el-form-item label="可获得分数">
            <el-input v-model="dxdata.khdfs"></el-input>
          </el-form-item>
          <el-form-item label="题目解析">
            <el-input type="textarea"
                      v-model="dxdata.tmjx"></el-input>
          </el-form-item>
          <el-form-item label="试题章节">
            <el-row></el-row>
            <el-row>
              <el-col :span=20>
                <el-input v-model="questionModel.capter"></el-input>
              </el-col>
              <el-col :span=4
                      style="text-align:center;">
                <el-button @click="onBtnChoiceCapterClickHandler"
                           type="success">选择章节</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="试题难度"> <br />
            <el-radio-group v-model="dxdata.stndz">
              <el-radio label="简单"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">简单</el-radio>
              <el-radio label="一般"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">一般</el-radio>
              <el-radio label="难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">难</el-radio>
              <el-radio label="很难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">很难</el-radio>
              <el-radio label="较难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">较难</el-radio>
              <el-radio label="非常难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">非常难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="适用培养层次">
            <el-input v-model="dxdata.pyccvalue"></el-input>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <chapter-dialog :dialogVisible.sync="choiceCapterDialogVisible"
                    @save="onChoiceDialogSaveHandler"
                    @cancel="onChoiceDialogCancelHandler" />
  </div>
</template>
<script>
import ChapterDialog from './chapterDialog'
import { Message } from 'element-ui'
export default {
  components: {
    'chapter-dialog': ChapterDialog,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    kcbm: {
      type: String,
    },
    kcmc: {
      type: String,
    },
    Textshow: {},
    wipedata: {},
  },
  data() {
    return {
      dxdata: {
        zqda: '',
        khdfs: '',
        tmjx: '',
        stndz: '',
        pyccvalue: '',
      },

      additem: [],
      rightKey: 2,
      rightKeyGroup: [],
      choiceCapterDialogVisible: false,
      questionModel: {
        capter: '',
      },
    }
  },
  methods: {
    onBtnChoiceCapterClickHandler: function () {
      this.choiceCapterDialogVisible = true
    },
    onChoiceDialogCancelHandler: function () {
      this.choiceCapterDialogVisible = false
    },
    onChoiceDialogSaveHandler: function (pVal) {
      Message({
        message: 'ChoicedCapter=' + pVal.label,
        type: 'error',
      })
      this.choiceCapterDialogVisible = false
      this.questionModel.capter = pVal.label
    },
    setDisplay: function () {
      if (this.visible) {
        document.getElementById('id_container_LongEssay').style.display =
          'block'
      } else {
        document.getElementById('id_container_LongEssay').style.display = 'none'
      }
    },
  },
  watch: {
    visible: {
      handler: function (p_val, p_oldval) {
        this.setDisplay()
      },
      deep: true,
    },
    async Textshow() {
      //   let arr = []
      //   await this.dxdata.daxx.forEach((item) => {
      //     item = item.name + ':' + item.content
      //     arr.push(item)
      //   })
      //   this.dxdata.daxx = arr.join('*-*-*')
      this.$emit('dxtdata', this.dxdata)
    },
  },
  mounted: function () {
    this.setDisplay()
  },
}
</script>

<style lang="less" scoped>
</style>

<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';
</style>
